<template>

    <div id="img"></div>

    <div id="box">
        <span style="font-size: 22px;color: #333;">选择预约</span><br>
        <span style="color: #999;font-size: 15px;border-bottom: 3px solid red;padding-bottom: 10px;">
            Select an appointment
        </span>
    </div>

    <!-- 提交数据的表单 -->
    <el-form v-model="recordInfo" :model="recordInfo">

        <!-- 选择摄影师 -->
        <div id="photo">
            <el-card v-if="isMakeUp == 'A'">
                <template #header>请选择摄影师</template>
                <div style="display: flex;flex-wrap: wrap;">
                    <!-- 一个div就是一个摄影师 -->
                    <div style="width: 200px; height: 280px;">
                        <el-form-item>
                            <el-select placeholder="请选择摄影师" v-model="recordInfo.photoId" @change="changePic">
                                <el-option v-for="item in photos" :value="item.id" :key="item.id"
                                    :label="`高级摄影师：${item.name}`" />
                            </el-select>
                        </el-form-item>
                    </div>
                    <!-- 摄影师对应图片 -->
                    <div v-if="pic" class="container">
                        <img :src="pic" class="user_img">
                    </div>
                    <div v-else class="container">
                        <el-avatar shape="square" class="user_img" style="font-size: 20px;">摄影师</el-avatar>
                    </div>
                </div>
                <template #footer><el-button type="danger" plain style="margin-left: 680px;" :disabled="dis"
                        @click="nextBtn">下一步</el-button></template>
            </el-card>

            <!-- 化妆师 -->
            <el-card v-if="isMakeUp == 'B'">
                <template #header>请选择化妆师</template>
                <div style="display: flex;flex-wrap: wrap;">
                    <div style="width: 200px; height: 280px;">
                        <el-form-item>
                            <el-select placeholder="请选择化妆师" v-model="recordInfo.makeId" @change="changePicMake">
                                <el-option v-for="item in makes" :value="item.id" :key="item.id"
                                    :label="`高级妆造师：${item.name}`" />
                            </el-select>
                        </el-form-item>
                    </div>
                    <!-- 摄影师对应图片 -->
                    <div v-if="pic2" class="container">
                        <img :src="pic2" class="user_img">
                    </div>
                    <div v-else class="container">
                        <el-avatar shape="square" class="user_img" style="font-size: 20px;">化妆师</el-avatar>
                    </div>
                </div>
                <template #footer>
                    <el-button type="success" plain class="backBtn" @click="backBtn">上一步</el-button>
                    <el-button type="danger" plain class="nextBtn" :disabled="dis2"
                        @click="nextBtnStyle">下一步</el-button>
                </template>
            </el-card>



            <!-- 妆造风格 -->
            <el-card v-if="isMakeUp == 'C'">
                <template #header>请选择妆造风格</template>
                <div style="display: flex;flex-wrap: wrap;">
                    <div style="width: 200px; height: 280px;">
                        <el-form-item>
                            <el-select placeholder="请选择妆造风格" v-model="recordInfo.styleId" @change="changePicStyle">
                                <el-option v-for="item in styles" :value="item.id" :key="item.id"
                                    :label="`妆造风格：${item.type}`" />
                            </el-select>
                        </el-form-item>
                    </div>
                    <!-- 摄影师对应图片 -->
                    <div v-if="pic3" class="container2">
                        <img :src="pic3" class="style_img"><br>
                        <span class="styleClickInfo">{{ styleInfo }}</span><br>
                        <span class="styleClickInfo" style="color: red;">￥{{ stylePrice }}</span>
                    </div>
                    <div v-else class="container2">
                        <el-avatar shape="square" class="style_img" style="font-size: 20px;">妆造风格</el-avatar>
                    </div>
                </div>
                <template #footer>
                    <el-button type="success" plain class="backBtn" @click="backBtnMake">上一步</el-button>
                    <el-button type="danger" plain class="nextBtn" :disabled="dis3" @click="nextBtnOk">下一步</el-button>
                </template>
            </el-card>

            <!-- 确认预约 -->
            <el-card v-if="isMakeUp == 'D'">
                <template #header>请查验预约项</template>
                <div style="display: flex;flex-wrap: wrap;">
                    <div class="successInfo">
                        <div class="pText">
                            <p>高级摄影师：{{ recordInfoValue.photo_name }}</p>
                            <p>高级妆造师：{{ recordInfoValue.make_name }}</p>
                            <p>妆造风格： {{ recordInfoValue.style_name }}</p>
                            <p>详情事宜： {{ recordInfoValue.info }}</p>
                            <p>整体费用： {{ recordInfoValue.price }}元</p>
                        </div>
                    </div>
                </div>
                <template #footer>
                    <el-button type="danger" plain class="backBtn" @click="backBtnStyle">上一步</el-button>
                    <el-button type="success" plain class="nextBtn" @click="bolLogin">确认预约</el-button>
                </template>
            </el-card>


            <!-- 预约成功 -->
            <el-card v-if="isMakeUp == 'Success'">
                <template #header>预约成功</template>
                <div style="display: flex;flex-wrap: wrap;">
                    <div class="successInfo">
                        <div>
                            <img src="../../images/success.png" width="150px"
                                style="margin-left: 50px;margin-top: 20px;">
                            <p style="margin-left: 30px;">稍后会有工作人员联系您</p>
                            <p style="margin-left: 10px;">如遇问题请致电：15144132219</p>
                        </div>
                    </div>
                </div>
                <template #footer>
                    <el-button type="success" plain @click="router.push('/home')">返回首页</el-button>
                    <el-button type="primary" plain @click="router.push('/record')"
                        style="margin-left: 580px;">预约记录</el-button>
                </template>
            </el-card>
        </div>
    </el-form>
    <!-- 进度条 -->
    <div id="jindu">
        <el-progress :percentage="jindu" :stroke-width="10" />
    </div>

    <!-- 对话框 -->
    <el-dialog v-model="dialogFormVisible" title="确认预约" width="600">
        <el-form class="label-width" :rules="rules" :model="userInfo">
            <el-form-item label="昵称&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" prop="name">
                <el-input autocomplete="off" placeholder="最小1位字符，最大10位" v-model="userInfo.name" />
            </el-form-item>
            <el-form-item label="联系方式" prop="phone">
                <el-input autocomplete="off" placeholder="请输入11位电话" v-model="userInfo.phone" />
            </el-form-item>

            <el-form-item label="验证码&nbsp;&nbsp;&nbsp;" prop="code">
                <el-input autocomplete=" off" placeholder="睁大眼睛~" v-model="userInfo.code" />
            </el-form-item>
            <div>
                <span id="updateCode" title="果真是老眼昏花" @click="updateCode">换一张</span>
                <span id="code">{{ code }}</span>
            </div>
        </el-form>

        <template #footer>
            <div>
                <el-button type="success" @click="successClick">一键预约</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus'
import router from '@/router/index';
import api from '../../api/record'
import userApi from '../../api/user'
import makeApi from '@/api/make'
import photoApi from '@/api/photo'
import styleApi from '@/api/style';
//导入pinia判断是否登录
import { userPiniaInfo } from '@/stores/userPinia';
//用户信息
const userInfoPinia = userPiniaInfo();
const jindu = ref(0)
// 控制预约显示信息
const isMakeUp = ref("A")
//绑定按钮点击  懒得拿数组优化
const dis = ref(true)
const dis2 = ref(true)
const dis3 = ref(true)

//图片名称
const pic = ref(null)
const pic2 = ref(null)
const pic3 = ref(null)

const styleInfo = ref('')
const stylePrice = ref('')

//对话框
const dialogFormVisible = ref(false)

//声明记录参数模型
const recordInfo = ref({
    userId: "",
    makeId: "",
    photoId: "",
    styleId: "",
})
//声明记录参数名称用于暂时展示
const recordInfoValue = ref({
    user_name: "",
    make_name: "",
    photo_name: "",
    style_name: "",
    price: "",
    info: ""
})

//用户数据模型
const userInfo = ref({
    name: '',
    phone: '',
    code: ''
})

const code = ref("mayue8")

//创建摄影师数据模型
const photos = ref([]);

//创建化妆师数据模型
const makes = ref([]);

//创建妆造风格数据模型
const styles = ref([]);


//查询所有摄影师
photoApi.getPhotoAll().then(res => {

    for (let i = 0; i < res.data.data.length; i++) {
       if(res.data.data[i].version != "离职"){
            photos.value.push(res.data.data[i])
       } 
    }

   
})
//查询所有化妆师
makeApi.getMakeAll().then(res => {
    for (let i = 0; i < res.data.data.length; i++) {
       if(res.data.data[i].version != "离职"){
            makes.value.push(res.data.data[i])
       } 
    }
})
//查询所有妆造类型
styleApi.getStyleAll().then(res => {
    for (let i = 0; i < res.data.data.length; i++) {
       if(res.data.data[i].version != "下架"){
            styles.value.push(res.data.data[i])
       } 
    }
})


// 选中摄影师时触发的方法
const changePic = (newId) => {
    // 根据ID找到对应的摄影师
    const photo = photos.value.find(photo => photo.id === newId);
    if (photo) {
        pic.value = photo.pic; // 更新选中的摄影师图片
        recordInfoValue.value.photo_name = photo.name
    }
    //解除按钮点击
    dis.value = false
};

// 选中摄影师时触发的方法
const changePicMake = (newId) => {
    // 根据ID找到对应的摄影师
    const make = makes.value.find(make => make.id === newId);
    if (make) {
        pic2.value = make.pic; // 更新选中的摄影师图片
        recordInfoValue.value.make_name = make.name
    }
    //解除按钮点击
    dis2.value = false
};

// 选中妆造触发的方法
const changePicStyle = (newId) => {
    // 根据ID找到对应的摄影师
    const style = styles.value.find(style => style.id === newId);
    if (style) {
        pic3.value = style.pic; // 更新选中的摄影师图片
        recordInfoValue.value.style_name = style.type
        recordInfoValue.value.price = style.price
        recordInfoValue.value.info = style.info
        styleInfo.value = style.info
        stylePrice.value = style.price
    }
    //解除按钮点击
    dis3.value = false
}

//切换选择
const backBtn = () => {
    isMakeUp.value = "A"
    jindu.value = 0
}

//下一步化妆师选择
const nextBtn = () => {
    isMakeUp.value = "B"
    jindu.value = 25
}

//下一步风格选择
const nextBtnStyle = () => {
    isMakeUp.value = "C"
    jindu.value = 50
}
//上一步化妆师选择
const backBtnMake = () => {
    isMakeUp.value = "B"
    jindu.value = 25
}
const backBtnStyle = () => {
    isMakeUp.value = "C"
    jindu.value = 50
}
const nextBtnOk = () => {
    isMakeUp.value = "D"
    jindu.value = 75
}


const rules = {
    name: [
        //元素失去焦点时
        { required: true, message: "请输入称呼", trigger: 'blur' },
        { min: 1, max: 10, message: '都说了1~10位???', trigger: 'blur' }
    ],
    phone: [
        { required: true, message: "请输入11位手机号码", trigger: 'blur' },
        { min: 11, max: 11, message: '11位，11位，怎么回事啊???', trigger: 'blur' }
    ],
    code: [
        { required: true, message: "不填能对嘛？？？", trigger: 'blur' },
        { min: 6, max: 6, message: '6位数验证码，What are you doing?', trigger: 'blur' }
    ]
}

const updateCode = () => {
    //点击换验证码
    const characters = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
    const charactersLength = characters.length;
    let result = '';
    const length = 6;
    for (let i = 0; i < length; i++) {
        const randomIndex = Math.floor(Math.random() * charactersLength);
        result += characters.charAt(randomIndex);
    }
    code.value = result
}

//第一个进，自动执行一次
updateCode()

//最终点击下一步，判断是否登录
const bolLogin = async () => {
    //判断是否登录，登录过了 就不需要在输入手机号登信息了
    if (userInfoPinia.userInfo != '') { 
        //已经登录直接预约就行
        recordInfo.value.userId = userInfoPinia.userInfo.id

        const res2 = await api.add(recordInfo.value);
        if (res2.data.code == 0) {
            ElMessage.success("预约成功")
            //切换页面
            isMakeUp.value = 'Success'
            //拉满进度条
            jindu.value = 100
        }
    } else {
        dialogFormVisible.value = true
    }
}


//最终预约
const successClick = async () => {

    if (userInfo.value.name.length > 0 && userInfo.value.phone.length == 11 && code.value == userInfo.value.code) {
        //用户数据存入用户表中
        const res1 = await userApi.addUser(userInfo.value)
        if (res1.data.code == 0) {
            recordInfo.value.userId = res1.data.data.id
            console.log(res1.data.data)
            //参数没问题，访问后台接口
            const res2 = await api.add(recordInfo.value);
            if (res2.data.code == 0) {
                ElMessage.success("预约成功！")
                dialogFormVisible.value = false
                isMakeUp.value = 'Success'
                jindu.value = 100
                //可以自动登录 
                login(userInfo.value)
          
            }
        }
    } else {
        ElMessage.error('参数不符合规则，或许没准你验证码错了~')
    }
}


//自动登录函数
const login = (data) =>{
    userApi.addUser(data).then( (res)=>{
        if(res.data.code == 0){
            //更新pinia
            userInfoPinia.setuserPinia(res.data.data)
            ElMessage.success("已为您自动登录")
        }
    } )
}
</script>

<style scoped>
#updateCode,
#code {
    display: inline-block;
    /* 将元素设置为内联块元素，方便在同一行显示且能设置尺寸等样式 */
    font-family: Arial, Helvetica, sans-serif;
    /* 设置字体，选择简洁清晰的字体样式 */
    padding: 5px 10px;
    /* 设置内边距，使内容周围有一定空间 */
    border: 1px solid #ccc;
    /* 添加边框，营造出验证码框的感觉 */
    border-radius: 5px;
    /* 边框圆角，使外观更圆润美观 */
    background-color: #f8f8f8;
    /* 设置背景色，选择淡色系让文字更清晰易读 */
    text-align: center;
    /* 文本居中对齐 */
    vertical-align: middle;
    /* 垂直方向上居中对齐，保证在同一行时排列整齐 */
    margin-right: 10px;
    /* 可以设置右边距，增加元素之间的间隔距离 */
}

#updateCode {
    cursor: pointer;
    /* 当鼠标悬停时显示手型光标，提示可点击操作 */
    user-select: none;
    /* 禁止用户选中文字，符合验证码这类不可选的特点 */
    transition: background-color 0.6s ease;
}

#updateCode:hover {
    background-color: rgb(244, 228, 56);
    color: white;
}

#code {
    font-style: italic;
    letter-spacing: 3px;
    /* 增加字符间距，让验证码看起来更分散、更像验证码的样式 */
    width: 120px;
    /* 根据验证码长度等实际情况设置宽度 */
    min-width: 80px;
    /* 设置最小宽度，保证一定的显示空间 */
    height: 20px;
    /* 根据字体大小等设置合适的高度 */
}

.el-option {
    height: 300px;
}

#photo {
    width: 800px;
    margin: 50px auto;
}

#jindu {
    width: 850px;
    margin-left: 350px;
    margin-top: -20px;
    margin-bottom: 50px;
}

#box {
    text-align: center;
    height: auto;
    margin-top: 50px
}

.nextBtn {
    float: right;
}

.user_img {
    border-radius: 15px;
    width: 180px;
    height: 180px;
}

.container {
    width: 180px;
    height: 180px;
    margin-top: 50px;
    margin-left: 80px;
}

.style_img {
    width: 290px;
    height: 180px;
}

.container2 {
    text-align: center;
    margin-top: 50px;
    margin-left: 30px;
}

.styleClickInfo {
    font-size: 13px;
    color: #999;
}

.successInfo {
    width: 400px;
    height: 280px;
    margin-left: 250px;
}

.pText {
    margin-top: 50px;
}

#img {
    background-image: url("../../images/rouge-2.png");
    background-size: cover;
    height: 570px;
    width: 100%;
}
</style>